<!documentTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>学员信息</title>
    <script src="__JS__/mui.min.js"></script>
    <link href="__CSS__/mui.min.css" rel="stylesheet"/>
    <link href="__CSS__/base.css" rel="stylesheet" />
    <link href="__CSS__/index.css" rel="stylesheet" />
    <link href="__CSS__/mui.picker.css" rel="stylesheet" />
	<link href="__CSS__/mui.poppicker.css" rel="stylesheet" />
	</head>
	<body>
		<header class="app_header">
			<div class="back"></div>
			学员信息
		</header>
		<form method="post" id="infoform" name="infoform" action="{:U('studentInfo')}" />
		<section>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_person.png"/>
				</div>
				<div class="i-input">
					<input class="input-text" type="text" id="username" name="username" value="{$info.name}"/>
				</div>
			</div>
			<div class="i-space"></div>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_id.png"/>
				</div>
				<div class="i-input">
					<input class="input-text" type="text" placeholder="身份证号码" id="identify" name="identify" value="{$info.identify}"/>
				</div>
			</div>
			<div class="i-area">
				<div class="i-icon">
					
				</div>
				<div class="i-input">
					<input class="input-text" type="text" placeholder="身份证地址" id="identify_addr" name="identify_addr" value="{$info.identify_addr}"/>
				</div>
			</div>
			<div class="i-space"></div>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_gender.png"/>
				</div>
				<div class="i-input pad-top-1vh">
				
					<eq name="info.gender" value="1">
						<div class="check-box-selected area-center" id="gender_man">
						男
						</div>
						<div class="check-box area-center" id="gender_woman">
						女
						</div>
					<else/>
						<div class="check-box area-center" id="gender_man">
						男
						</div>
						<div class="check-box-selected area-center" id="gender_woman">
						女
						</div>
					</eq>
						
				</div>
			</div>
			<div class="i-space"></div>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_mobike.png"/>
				</div>
				<div class="i-input pad-top-1vh">
					<eq name="info.have_mb" value="1">
						<div class="check-box-selected area-center" id="have_mb">
					<else/>
						<div class="check-box area-center" id="have_mb">
					</eq>
							有摩托车证
						</div>
				</div>
			</div>
			<div class="i-space"></div>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_school.png"/>
				</div>
				<div class="i-input pad-top-1vh">
				<eq name="info.join_school" value="1">
					<div class="check-box-selected area-center" id="join_school">
				<else/>
					<div class="check-box area-center" id="join_school">
				</eq>
						其他驾校报名过
					</div>
				</div>
			</div>
			<div class="i-space"></div>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_phone.png"/>
				</div>
				<div class="i-input">
					<input class="input-text" placeholder="手机号码" id="mobile" name="mobile"  value="{$info.mobile}"/>
				</div>
			</div>
			<div class="i-area">
				<div class="i-icon">
					<div class="mui-btn checkcode" >发送验证码</div>
				</div>
				<div class="i-input">
					<input class="input-text p-w-10" type="text" placeholder="请输入验证码" id="checkcode" name="checkcode"  value=""/>
				</div>
			</div>
			
			<div class="i-space"></div>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_height.png"/>
				</div>
				<div class="i-input">
					<input class="input-text"  type="text" placeholder="身高" id="height" name="height" value="{$info.height}"/>
				</div>
			</div>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_see.png"/>
				</div>
				<div class="i-input pad-top-1vh">
					<eq name="info.is_shortsignted" value="1">
						<div class="check-box-selected area-center" id="is_shortsignted">
					<else/>
					<div class="check-box area-center" id="is_shortsignted">
					</eq>
						近视
						</div>
				</div>
			</div>
			<div class="i-area">
				<div class="i-icon">
					<img  src="__IMG__/i_area.png"/>
				</div>
				<div class="i-input">
					<input class="input-text" id="showCityPicker3" placeholder="地区" name="address" value="{$info.address}"/>
				</div>
			</div>
			<input type="hidden" id="uid" value="{$uid}" name="uid"/>
			<input type="hidden" id="courseid" value="{$courseid}" name="courseid"/>
			<input type="hidden" id="gender" name="gender" value="{$info.gender}"/>
			<input type="hidden" id="have_mbike" name="have_mb" value="{$info.have_mb}"/>
			<input type="hidden" id="join_school_value" value="{$info.join_school}" name="join_school"/>
			<input type="hidden" id="is_shortsignted_value" value="{$info.is_shortsignted}" name="is_shortsignted"/>
		</section>
		<!-- <button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button> -->
		<input type="hidden" id='cityResult3' class="ui-alert" />
		<div class="btn-submit area-center" id="info-submit">
			提交
		</div>
		</form>
	</body>
	<script src="__JS__/mui.picker.js"></script>
	<script src="__JS__/mui.poppicker.js"></script>
	<script type="text/javascript" src="__JS__/filexible_css.js" ></script>
	<script type="text/javascript" src="__JS__/flexible.js" ></script>
	<script src="__JS__/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="__JS__/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.init();
		mui("body").on("tap",".back",function(){
			window.history.back();
		});
		
		mui("body").on("tap","#gender_man",function(){
			mui("#gender_man")[0].classList.add("check-box-selected");
			mui("#gender_woman")[0].classList.remove("check-box-selected");
			mui("#gender_woman")[0].classList.add("check-box");
			mui("#gender")[0].value=1;
		})
		mui("body").on("tap","#gender_woman",function(){
			mui("#gender_woman")[0].classList.add("check-box-selected");
			mui("#gender_man")[0].classList.remove("check-box-selected");
			mui("#gender_man")[0].classList.add("check-box");
			mui("#gender")[0].value=0;
		})
		mui("body").on("tap","#have_mb",function(){
			if(mui("#have_mbike")[0].value==0){
			mui("#have_mb")[0].classList.add("check-box-selected");
			mui("#have_mb")[0].classList.remove("check-box");
			mui("#have_mbike")[0].value=1;
			}else{
			mui("#have_mb")[0].classList.add("check-box");
			mui("#have_mb")[0].classList.remove("check-box-selected");
			mui("#have_mbike")[0].value=0;	
			}
		})
		mui("body").on("tap","#join_school",function(){
			if(mui("#join_school_value")[0].value==0){
			mui("#join_school")[0].classList.add("check-box-selected");
			mui("#join_school")[0].classList.remove("check-box");
			mui("#join_school_value")[0].value=1;
			}else{
			mui("#join_school")[0].classList.add("check-box");
			mui("#join_school")[0].classList.remove("check-box-selected");
			mui("#join_school_value")[0].value=0;	
			}
		})
		mui("body").on("tap","#is_shortsignted",function(){
			if(mui("#is_shortsignted_value")[0].value==0){
			mui("#is_shortsignted")[0].classList.add("check-box-selected");
			mui("#is_shortsignted")[0].classList.remove("check-box");
			mui("#is_shortsignted_value")[0].value=1;
			}else{
			mui("#is_shortsignted")[0].classList.add("check-box");
			mui("#is_shortsignted")[0].classList.remove("check-box-selected");
			mui("#is_shortsignted_value")[0].value=0;	
			}
		})
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new mui.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = document.getElementById('showCityPicker3');
					var cityResult3 = document.getElementById('cityResult3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							//cityResult3.value =+ _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
							//返回 false 可以阻止选择框的关闭
							showCityPickerButton.value=_getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
							
						});
					}, false);
   var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;    			
		/*发送验证码*/
	mui('body').on('tap','.checkcode',function(){
		var phone=mui("#mobile")[0].value;
		if (!phoneReg.test(phone)) {  
	        mui.alert('请输入有效的手机号码！');  
	        return false;  
	    }  
		mui.get("{:U('sendCheckCode')}",{phone:phone},function(json){
			data=eval(json);
			mui.alert(data.info); 
			
			if(data.status==1){
				//修改按钮
				timeshow();
			}
		});
	});
	/*按钮计时器*/
	function timeshow(){
    		var time = 60;//s
    		var start = window.setInterval(function(){
        	time = time - 1;
        	console.log(time);
        	mui(".checkcode")[0].classList.add("mui-disabled");
        	mui(".checkcode")[0].innerHTML="已发送（"+time+")";
        	if(time == 0){
            window.clearInterval(start);
            mui(".checkcode")[0].classList.remove("mui-disabled");
            mui(".checkcode")[0].innerHTML="发送验证码";
        	}
    	},1000);
	}		   
		 /* 提交 */
		 mui("body").on("tap","#info-submit",function(){
			
			 	//提交验证码
			 	var mobile=mui("#mobile")[0].value;
			 	 //手机号正则  
			    
			 	if (!phoneReg.test(mobile)) {  
			        mui.alert('请输入有效的手机号码！');  
			        return false;  
			    }  		
			  
			 
			//console.log(1);
			var form = document.getElementById('infoform');
			//再次修改input内容
			form.submit();
			
			/* 
			var username=mui("#username")[0].value;
			var identify=mui("#identify")[0].value; 
			var identify_addr=mui("#identify_addr")[0].value; 
			var gender=mui("#gender")[0].value; 
			var have_mbike=mui("#have_mbike")[0].value; 
			var join_school_value=mui("#join_school_value")[0].value; 
			var is_shortsignted_value=mui("#is_shortsignted_value")[0].value; 
			var mobile=mui("#mobile")[0].value;
			var height=mui("#height")[0].value;
			var address=mui("#showCityPicker3")[0].value;
			var uid=mui("#uid")[0].value;
			
			console.log(username);
			console.log(identify);
			console.log(identify_addr);
			console.log(gender);
			console.log(have_mbike);
			console.log(join_school_value);
			console.log(is_shortsignted_value);
			console.log(mobile);
			console.log(height);
			console.log(address);
			console.log(uid);
			
			
			mui.post("{:U('studentInfo')}",{uid:uid,username:username,identify:identify,identify_addr:identify_addr,gender:gender,have_mb:have_mbike,join_school:join_school,is_shortsignted:is_shortsignted_value,mobile:mobile,height:height,address:address},function(json){ 
				var data=eval(json);
				mui.alert(data.info);
				if(data.status==1){
					window.location.href=data.url;
				}
			}) */
			
		 })
	</script>
</html>
